<template>
  <div class="PieChart">
    <div v-if="chartData && chartData.length" class="chart-box">
      <div ref="chartRef" class="chart"></div>
      <div class="area-text"> 事件类型</div>
      <div class="leng-box"></div>
    </div>
    <div v-else class="s-empty">
      <img src="@/assets/images/noData.png" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, defineProps, watch, nextTick, ref, onUnmounted } from "vue";
import { nowSize } from "@/utils/utils";
import * as echarts from "echarts";
const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
  color: {
    type: Array,
    default: () => ["#F03317", "#FFAF1D", "#FEF67A", "#0CC4FF", "#27CC81", "#CA88FF",],
  },
});
const chartRef: any = ref(null);
let myChart: any;

// 初始化echarts图表
const initChart = () => {
  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }
  let option: any = {
    tooltip: {
      trigger: "item",
      borderColor: '#116fc1',
      borderWidth: nowSize(2), // 设置边框宽度
      backgroundColor: 'rgba(7,31,52,0.8)',
      textStyle: {
        color: '#ffffff',
      },
    },
    title: {
      text: '268',
      left: '71%',
      y: 'center',
      textStyle: {
        fontSize: nowSize(58),
        lineHeight: nowSize(58),
        color: 'rgba(85, 255, 255, 0.99)',
      },
    },
    legend: {
      orient: "vertical", // 设置图例垂直排列
      x: '8%',
      top: 'center',
      icon: "rect",
      itemGap: nowSize(40),
      itemWidth: nowSize(30), // 设置图例标记的宽度为正方形
      itemHeight: nowSize(30), // 设置图例标记的高度为正方形
      textStyle: {
        padding: [0, nowSize(30), 0, nowSize(30)],
        color: "#ffffff",
        fontSize: nowSize(40), // 可以根据需要调整大小
        rich: {
          name: {
            fontSize: nowSize(45), // 可以根据需要调整大小
            color: "#ffffff",
          },
          value: {
            color: "#00FFFF",
            fontSize: nowSize(45),
            padding: [0, nowSize(20), 0, nowSize(180)], // 添加右边距以分隔名称和数值
          },
        },
      },
      formatter: function (name: any) {
        let item: any = props.chartData.find(function (d: any) {
          return d.name === name;
        });
        return `{name|${item.name}}{value|${item.value}}个`;
      },
    },
    color: props.color,
    label: {
      show: false,
      position: "center",
    },
    series: [
      {
        type: "pie",
        padAngle: 6,
        radius: ["58%", "68%"],
        center: ["75%", "50%"],
        label: {
          show: false,
          position: "top",
        },
        itemStyle: {
          borderRadius: 0,
        },
        data: props.chartData,
      },
    ],
  };
  option && myChart.setOption(option, true);
};
// 判断是否有数据，有数据渲染echart图
const handleResize = async () => {
  if (myChart) {
    myChart.resize();
    initChart();
  }
};

/**/
watch(
  () => props.chartData,
  async () => {
    if (props.chartData && props.chartData.length) {
      await nextTick();
      initChart();
    }
  },
  { immediate: true },
);
onMounted(() => {
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  myChart && myChart.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="less" scoped>
.PieChart {
  width: 100%;
  height: 100%;
  .s-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 513px;
      height: 377px;
    }
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/images/pine-bg.png");
    background-size: 40% 75%;
    background-repeat: no-repeat;
    background-position: 91.8% center;
    .chart {
      width: 100%;
      height: 100%;
    }
    .num {
      display: inline-block;
      color: #f89929;
      margin-top: 25px;
    }
    .area-text {
      position: absolute;
      top: 59%;
      left: 68%;
      width: 255px;
      height: 80px;
      background: url("@/assets/images/line-bg.png") no-repeat center center;
      background-size: 100% 100%;
      color: #ffffff;
      text-align: center;
      line-height: 80px;
    }

    .leng-box {
      position: absolute;
      top: 16%;
      left: 5%;
      z-index: -1;
      width: 780px;
      height: 560px;
      background: url("@/assets/images/event-tl.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
}
</style>
